function cammer(x, y, z) {
    this.x = x;
    this.y = y;
    this.z = z;
}

function vector(x, y, z) {
    this.x = x;
    this.y = y;
    this.z = z;
}

function vector2(x, y) {
    this.x = x;
    this.y = y;
}

function screen(d) {
    this.d = d;
}

function defineObj() {
    var point = [new vector(-0.5, -0.5, 1), 
        new vector(-0.5, 0.5, 1), 
        new vector(0.5, -0.5, 1),
        new vector(0.5, 0.5, 1),
        new vector(-0.5, -0.5, 2),
        new vector(-0.5, 0.5, 2),
        new vector(0.5, -0.5, 2),
        new vector(0.5, 0.5, 2)];
    return point;
}


function moveX(point, x) {
    for (i=0; i < point.length; i++) {
        point[i].x = point[i].x + x;
    }
    return point;
}

function moveY(point, y) {
    for (i=0; i<point.length; i++) {
        point[i].y = point[i].y + y;
    }
    return point;
}

function moveZ(point, z) {
    for (i=0; i<point.length; i++) {
        point[i].z = point[i].z + z;
    }
    return point;
}

function move(point, x, y, z) {
    for (i=0; i<point.length; i++) {
        point[i].x = point[i].x + x;
        point[i].y = point[i].y + y;
        point[i].z = point[i].z + z;
    }
    return point;
}

function transform3DTo2D(vector, screen, cammer) {
    var x = cammer.x + ((vector.x - cammer.x)*(screen.d - cammer.z))/(vector.z-cammer.z);
    var y = cammer.y + ((vector.y - cammer.y)*(screen.d - cammer.z))/(vector.z-cammer.z);
    return new vector2(x, y);
}

function rotaX3DValue(obj, sin, cos) {
    var y = obj.y;
    var z = obj.z;
    var point = new vector(obj.x, obj.y, obj.z);
    point.y = y*cos - z*sin;
    point.z = y*sin + z*cos;
    return point;
}

function rotaX3D(obj, degree) {
    var y = obj.y;
    var z = obj.z;
    var point = new vector(obj.x, obj.y, obj.z);
    point.y = y*Math.cos(degree) - z*Math.sin(degree);
    point.z = y*Math.sin(degree) + z*Math.cos(degree);
    return point;
}

function rotaY3DValue(obj, sin, cos) {
    var x = obj.x;
    var z = obj.z;
    var point = new vector(obj.x, obj.y, obj.z);
    point.x = x * cos - z * sin;
    point.z = x * sin + z * cos;
    return point;
}

function rotaY3D(obj, degree) {
    var x = obj.x;
    var z = obj.z;
    var point = new vector(obj.x, obj.y, obj.z);
    point.x = x * Math.cos(degree) - z * Math.sin(degree);
    point.z = x * Math.sin(degree) + z * Math.cos(degree);
    console.log(Math.cos(degree));
    console.log(Math.sin(degree));
    return point;
}

function sin2XoZ(vector) {
    return vector.y / Math.sqrt(vector.y*vector.y + vector.z*vector.z);
}

function cos2XoZ(vector) {
    return vector.z / Math.sqrt(vector.y*vector.y + vector.z*vector.z);
}

function sin2YoZ(vector) {
    return vector.x / Math.sqrt(vector.x*vector.x + vector.z*vector.z);
}

function cos2YoZ(vector) {
return vector.z / Math.sqrt(vector.x*vector.x + vector.z*vector.z);
}

function init() {
    //定义照相机
    var cammerObj = new cammer(0, 0, 0);

    var screenObj = new screen(0.5);

    var point = new defineObj();

    // point = move(point, 1, 1, 0.2);

    var point2 = new Array(8);

    var c = document.getElementById("canvas");
    var ctx = c.getContext("2d");
    //设置绘制颜色
    ctx.fillStyle="#0000FF";

    console.log(point.length);
    for (var i=0; i<point.length; i++) {
        point2[i] = transform3DTo2D(point[i], screenObj, cammerObj);
        var x = point2[i].x*100+25;
        var y = point2[i].y*100+25;
        console.log("x:" + x + " y:" +y);

        //绘制成矩形
         ctx.fillRect(x, y,4,4);
        
    }

    setInterval(function(){
        var x = 0.1;
        var y = 0.1;
        var z = 0.2;
        ctx.clearRect(0, 0, 300, 300);
        cammerObj.x = cammerObj.x + x;
        cammerObj.y = cammerObj.y + y;
        cammerObj.z = cammerObj.z + z;
        
        for (var i=0; i<point.length; i++) {
            point2[i] = transform3DTo2D(point[i], screenObj, cammerObj);
            var x = point2[i].x*100+25;
            var y = point2[i].y*100+25;
            console.log("x:" + x + " y:" +y);
    
            //绘制成矩形
             ctx.fillRect(x, y,4,4);
            
        }
    },500);
    

}

/**
 * 正交投影
 * d = (Vx(Cx-Ox)+Vy(Cy-Oy)+Vz(Cz-Oz))/(Vx*Vx+Vy*Vy+Vz*Vz)
 * x=dVx+Ox
 * y=dVy+Oy
 * z=dVz+Oz
 * @param {*} point 
 * @param {*} cammer 
 * @param {*} cammerV 
 * @param {*} sinXoZ 
 * @param {*} cosXoZ 
 * @param {*} sinYoZ 
 * @param {*} cosYoZ 
 */
function rotaPoint2XoY(point, cammer, cammerV, sinXoZ, cosXoZ, sinYoZ, cosYoZ) {
    var d = (cammerV.x * (cammer.x - point.x) + cammerV.y * (cammer.y - point.y) + cammerV.z * (cammer.z - point.z)) / (cammerV.x*cammerV.x + cammerV.y*cammerV.y + cammerV.z*cammerV.z);
    point.x = d * cammerV.x + point.x;
    point.y = d * cammerV.y + point.y;
    point.z = d * cammerV.z + point.z;
    // console.log("befor: x:"+point.x+",y:"+point.y+",z:"+point.z);
    point = rotaX3DValue(point, sinXoZ, cosXoZ);
    point = rotaY3DValue(point, sinYoZ, cosYoZ);
    // console.log("after: x:"+point.x+",y:"+point.y+",z:"+point.z);
    return point;
}

function init2() {
    //定义照相机
    var cammerObj = new cammer(0, 0, 0);

    var cammerV = new vector(1, 1, 1);

    var sinXoZ = sin2XoZ(cammerV);

    var cosXoZ = cos2XoZ(cammerV);

    var cammerVAfter = rotaX3D(cammerV, sinXoZ, cosXoZ);

    var sinYoZ = sin2YoZ(cammerVAfter);
    var cosYoZ = cos2YoZ(cammerVAfter);
    cammerVAfter = rotaY3DValue(cammerVAfter, sinYoZ, cosYoZ);
    console.log("x:"+cammerVAfter.x + "y:" + cammerVAfter.y + "z:" + cammerVAfter.z);

    var centerPoint = new vector(4,4,4);
    var width = 2;
    var point = [new vector(centerPoint.x-(width/2), centerPoint.y-(width/2), centerPoint.z+(width/2)),
        new vector(centerPoint.x+(width/2), centerPoint.y-(width/2), centerPoint.z+(width/2)),
        new vector(centerPoint.x+(width/2), centerPoint.y+(width/2), centerPoint.z+(width/2)),
        new vector(centerPoint.x-(width/2), centerPoint.y+(width/2), centerPoint.z+(width/2)),
        new vector(centerPoint.x-(width/2), centerPoint.y-(width/2), centerPoint.z-(width/2)),
        new vector(centerPoint.x+(width/2), centerPoint.y-(width/2), centerPoint.z-(width/2)),
        new vector(centerPoint.x+(width/2), centerPoint.y+(width/2), centerPoint.z-(width/2)),
        new vector(centerPoint.x-(width/2), centerPoint.y+(width/2), centerPoint.z-(width/2))];

    var pointNew = new Array(8);
    for (i=0; i<point.length; i++) {
        var obj = rotaPoint2XoY(point[i], cammerObj, cammerV, sinXoZ, cosXoZ, sinYoZ, cosYoZ);
        var x = (obj.x + 2) * 30;
        var y = (obj.y + 2) * 30;
        console.log("x:" + x +",y:"+y)
        // ctx.fillRect(x, y, 1, 1);
        pointNew[i] = new vector2(x, y);
    }

    var c = document.getElementById("canvas");
    var ctx = c.getContext("2d");
    ctx.strokeStyle = "red";
    ctx.lineWidth = 1;

 //面1
 drawPlate(ctx, pointNew[0], pointNew[1], pointNew[2], pointNew[3]);
 //面2 
 drawPlate(ctx, pointNew[0], pointNew[4], pointNew[7], pointNew[3]);
 //面3
 drawPlate(ctx, pointNew[0], pointNew[4], pointNew[5], pointNew[1]);
 //面4
 drawPlate(ctx, pointNew[1], pointNew[5], pointNew[6], pointNew[2]);
 //面5
 drawPlate(ctx, pointNew[2], pointNew[6], pointNew[7], pointNew[3]);
 //面6
 drawPlate(ctx, pointNew[4], pointNew[5], pointNew[6], pointNew[7]);

    // ctx.beginPath();
    // ctx.moveTo(pointNew[0].x, pointNew[0].y);
    // ctx.lineTo(pointNew[1].x, pointNew[1].y);
    // ctx.lineTo(pointNew[3].x, pointNew[3].y);
    // ctx.lineTo(pointNew[2].x, pointNew[2].y);
    // ctx.lineTo(pointNew[0].x, pointNew[0].y);
    // ctx.moveTo(pointNew[1].x, pointNew[1].y);
    // ctx.lineTo(pointNew[5].x, pointNew[5].y);
    // ctx.lineTo(pointNew[7].x, pointNew[7].y);
    // ctx.lineTo(pointNew[3].x, pointNew[3].y);
    // ctx.moveTo(pointNew[2].x, pointNew[2].y);
    // ctx.lineTo(pointNew[6].x, pointNew[6].y);
    // ctx.lineTo(pointNew[7].x, pointNew[7].y);
    // ctx.moveTo(pointNew[0].x, pointNew[0].y);
    // ctx.lineTo(pointNew[4].x, pointNew[4].y);
    // ctx.lineTo(pointNew[5].x, pointNew[5].y);
    // ctx.moveTo(pointNew[6].x, pointNew[6].y);
    // ctx.lineTo(pointNew[4].x, pointNew[4].y);

//      //面1
//      ctx.moveTo(pointNew[0].x, pointNew[0].y);
//      ctx.lineTo(pointNew[1].x, pointNew[1].y);
//      ctx.lineTo(pointNew[3].x, pointNew[3].y);
//      ctx.lineTo(pointNew[2].x, pointNew[2].y);
//      ctx.fillStyle = "red";
//      ctx.closePath();
//      ctx.fill();
//      //面2
//      ctx.beginPath();
//      ctx.moveTo(pointNew[0].x, pointNew[0].y);
//      ctx.lineTo(pointNew[4].x, pointNew[4].y);
//      ctx.lineTo(pointNew[5].x, pointNew[5].y);
//      ctx.lineTo(pointNew[1].x, pointNew[1].y);
//      ctx.fillStyle = "blue";
//      ctx.closePath();
//      ctx.fill();
 
     
//  //面3
//  ctx.beginPath();
//  ctx.moveTo(pointNew[0].x, pointNew[0].y);
//  ctx.lineTo(pointNew[2].x, pointNew[2].y);
//  ctx.lineTo(pointNew[6].x, pointNew[6].y);
//  ctx.lineTo(pointNew[4].x, pointNew[4].y);
//  ctx.fillStyle = "yellow";
//  ctx.closePath();
//  ctx.fill();
 
 
//  //面4
//  ctx.beginPath();
//  ctx.moveTo(pointNew[2].x, pointNew[2].y);
//  ctx.lineTo(pointNew[3].x, pointNew[3].y);
//  ctx.lineTo(pointNew[7].x, pointNew[7].y);
//  ctx.lineTo(pointNew[6].x, pointNew[6].y);
//  ctx.fillStyle = "orange";
//  ctx.closePath();
//  ctx.fill();
 
 
//  //面5
//  ctx.beginPath();
//  ctx.moveTo(pointNew[1].x, pointNew[1].y);
//  ctx.lineTo(pointNew[3].x, pointNew[3].y);
//  ctx.lineTo(pointNew[7].x, pointNew[7].y);
//  ctx.lineTo(pointNew[5].x, pointNew[5].y);
//  ctx.fillStyle = "black";
//  ctx.closePath();
//  ctx.fill();
 
 
//  //面6
//  ctx.beginPath();
//  ctx.moveTo(pointNew[4].x, pointNew[4].y);
//  ctx.lineTo(pointNew[6].x, pointNew[6].y);
//  ctx.lineTo(pointNew[7].x, pointNew[7].y);
//  ctx.lineTo(pointNew[5].x, pointNew[5].y);
//  ctx.fillStyle = "green";
//  ctx.closePath();
//  ctx.fill();


//     // ctx.closePath();
//     ctx.stroke();
}

function init3() {
   var cammerV = new vector(0, 0, 1);
    var flag = false;
   setInterval(function() {
        var c = document.getElementById("canvas");
        var ctx = c.getContext("2d");
        ctx.strokeStyle = "red";
        ctx.lineWidth = 1;
        ctx.clearRect(0, 0, 1000, 1000);
        if (cammerV.x < 10 && flag == false) {
            cammerV.x = cammerV.x + 0.1;
            //    cammerV.y = cammerV.y - 0.1;
            //    cammerV.z = cammerV.z - 0.1;
        } else {
            flag = true;
            cammerV.x = cammerV.x - 0.1;
            //    cammerV.y = cammerV.y + 0.1;
            //    cammerV.z = cammerV.z + 0.1;
               if (cammerV.x < -10) {
                   flag = false;
               }
        }
      
       console.log("cammer.x"+cammerV.x+"cammer.y"+cammerV.y+"cammer.z"+cammerV.z);
       changeCammerV(cammerV, ctx);
   }, 50);
}

function changeCammerV(cammerV, ctx) {
    //定义照相机
    var cammerObj = new cammer(0, 0, 0);

    var sinXoZ = sin2XoZ(cammerV);

    var cosXoZ = cos2XoZ(cammerV);

    var cammerVAfter = rotaX3D(cammerV, sinXoZ, cosXoZ);

    var sinYoZ = sin2YoZ(cammerVAfter);
    var cosYoZ = cos2YoZ(cammerVAfter);
    cammerVAfter = rotaY3DValue(cammerVAfter, sinYoZ, cosYoZ);
    console.log("x:"+cammerVAfter.x + "y:" + cammerVAfter.y + "z:" + cammerVAfter.z);

    var point = new defineObj();

    var pointNew = new Array(8);
    for (i=0; i<point.length; i++) {
        var obj = rotaPoint2XoY(point[i], cammerObj, cammerV, sinXoZ, cosXoZ, sinYoZ, cosYoZ);
        var x = (obj.x + 5) * 100;
        var y = (obj.y + 5) * 100;
        console.log("x:" + x +",y:"+y)
        // ctx.fillRect(x, y, 1, 1);
        pointNew[i] = new vector2(x, y);
    }
    //method 1
    //ctx.beginpath();
    // ctx.moveTo(pointNew[0].x, pointNew[0].y);
    // ctx.lineTo(pointNew[1].x, pointNew[1].y);
    // ctx.lineTo(pointNew[3].x, pointNew[3].y);
    // ctx.lineTo(pointNew[2].x, pointNew[2].y);
    // ctx.lineTo(pointNew[0].x, pointNew[0].y);
    // ctx.fillStyle = "blue";
    // ctx.moveTo(pointNew[1].x, pointNew[1].y);
    // ctx.lineTo(pointNew[5].x, pointNew[5].y);
    // ctx.lineTo(pointNew[7].x, pointNew[7].y);
    // ctx.lineTo(pointNew[3].x, pointNew[3].y);
    // ctx.moveTo(pointNew[2].x, pointNew[2].y);
    // ctx.lineTo(pointNew[6].x, pointNew[6].y);
    // ctx.lineTo(pointNew[7].x, pointNew[7].y);
    // ctx.moveTo(pointNew[0].x, pointNew[0].y);
    // ctx.lineTo(pointNew[4].x, pointNew[4].y);
    // ctx.lineTo(pointNew[5].x, pointNew[5].y);
    // ctx.moveTo(pointNew[6].x, pointNew[6].y);
    // ctx.lineTo(pointNew[4].x, pointNew[4].y);

    //method2
    //面1
    ctx.beginPath();

    ctx.moveTo(pointNew[0].x, pointNew[0].y);
    ctx.lineTo(pointNew[1].x, pointNew[1].y);
    ctx.lineTo(pointNew[3].x, pointNew[3].y);
    ctx.lineTo(pointNew[2].x, pointNew[2].y);
    ctx.fillStyle = "red";
    ctx.closePath();
    ctx.fill();
    ctx.stroke();


    //面2
    ctx.beginPath();
    ctx.moveTo(pointNew[0].x, pointNew[0].y);
    ctx.lineTo(pointNew[4].x, pointNew[4].y);
    ctx.lineTo(pointNew[5].x, pointNew[5].y);
    ctx.lineTo(pointNew[1].x, pointNew[1].y);
    ctx.fillStyle = "blue";
    ctx.closePath();
    ctx.fill();
    ctx.stroke();


    
//面3
ctx.beginPath();
ctx.moveTo(pointNew[0].x, pointNew[0].y);
ctx.lineTo(pointNew[2].x, pointNew[2].y);
ctx.lineTo(pointNew[6].x, pointNew[6].y);
ctx.lineTo(pointNew[4].x, pointNew[4].y);
ctx.fillStyle = "yellow";
ctx.closePath();
ctx.fill();
ctx.stroke();



//面4
ctx.beginPath();
ctx.moveTo(pointNew[2].x, pointNew[2].y);
ctx.lineTo(pointNew[3].x, pointNew[3].y);
ctx.lineTo(pointNew[7].x, pointNew[7].y);
ctx.lineTo(pointNew[6].x, pointNew[6].y);
ctx.fillStyle = "orange";
ctx.closePath();
ctx.fill();
ctx.stroke();



//面5
ctx.beginPath();
ctx.moveTo(pointNew[1].x, pointNew[1].y);
ctx.lineTo(pointNew[3].x, pointNew[3].y);
ctx.lineTo(pointNew[7].x, pointNew[7].y);
ctx.lineTo(pointNew[5].x, pointNew[5].y);
ctx.fillStyle = "black";
ctx.closePath();
ctx.fill();
ctx.stroke();



//面6
ctx.beginPath();
ctx.moveTo(pointNew[4].x, pointNew[4].y);
ctx.lineTo(pointNew[6].x, pointNew[6].y);
ctx.lineTo(pointNew[7].x, pointNew[7].y);
ctx.lineTo(pointNew[5].x, pointNew[5].y);
ctx.fillStyle = "green";
ctx.closePath();
ctx.fill();
ctx.stroke();
}


/**
 * 摄像机 360度旋转
 */
function init4() {
    //定义照相机
    var cammerObj = new cammer(0, 0, 0);
    var cammerV = new vector(0, 0, 0.5);
     var degree = 0;
     var flag = false
     var i = 0;
    setInterval(function() {
         var c = document.getElementById("canvas");
         var ctx = c.getContext("2d");
         ctx.strokeStyle = "red";
         ctx.lineWidth = 1;
         ctx.clearRect(0, 0, 1000, 1000);
         var cammerVNew = new vector(0, 0, 0);
         var cammerObjNew = new cammer(0, 0, 0);
        //  if (degree <= 360 && flag == false) {
        //     cammerVNew = rotaY3D(cammerV, degree);
        //     cammerObjNew.z = cammerObj.z + 1.5;
        //     cammerObjNew = rotaY3D(cammerObjNew, degree);
        //     cammerObjNew.z = cammerObjNew.z - 1.5;
        //     degree = degree + 1;
        //  } else {
        //      flag = true;
        //      degree = degree - 1;
        //      cammerVNew = rotaY3D(cammerV, degree);
        //      cammerObjNew.z = cammerObj.z + 1.5;
        //      cammerObjNew = rotaY3D(cammerObjNew, degree);
        //      cammerObjNew.z = cammerObjNew.z - 1.5;
        //      if (degree >= 0) {
        //          flag = false;
        //      }
        //  }
            switch(i % 4) {
                case 0:
            cammerVNew = rotaY3DValue(cammerV, 0, 1);
            cammerObjNew.z = cammerObj.z + 1.5;
            cammerObjNew = rotaY3DValue(cammerObjNew, 0, 1);
            cammerObjNew.z = cammerObjNew.z - 1.5;
            break;
            case 1:
            cammerVNew = rotaY3DValue(cammerV, 1, 0);
            cammerObjNew.z = cammerObj.z + 1.5;
            cammerObjNew = rotaY3DValue(cammerObjNew, 1, 0);
            cammerObjNew.z = cammerObjNew.z - 1.5;
            break;
            case 2:
            cammerVNew = rotaY3DValue(cammerV, 0, -1);
            cammerObjNew.z = cammerObj.z + 1.5;
            cammerObjNew = rotaY3DValue(cammerObjNew, 0, -1);
            cammerObjNew.z = cammerObjNew.z - 1.5;
            break;
            case 3:
            cammerVNew = rotaY3DValue(cammerV, -1, 0);
            cammerObjNew.z = cammerObj.z + 1.5;
            cammerObjNew = rotaY3DValue(cammerObjNew, -1, 0);
            cammerObjNew.z = cammerObjNew.z - 1.5;
            break;
            }
            i++;

        console.log("cammerObjNew.x:"+cammerObjNew.x+"cammerObjNew.y"+cammerObjNew.y+"cammerObjNew.z"+cammerObjNew.z);
        console.log("cammerVNew.x:"+cammerVNew.x + "cammerVnew.y:"+ cammerVNew.y + "cammerVnew.z:"+cammerVNew.z);
        changeCammerV4(cammerObjNew, cammerVNew, ctx);
    }, 1000);
 }

 function changeCammerV4(cammerObj, cammerV, ctx) {

    var sinXoZ = sin2XoZ(cammerV);

    var cosXoZ = cos2XoZ(cammerV);

    var cammerVAfter = rotaX3DValue(cammerV, sinXoZ, cosXoZ);

    var sinYoZ = sin2YoZ(cammerVAfter);
    var cosYoZ = cos2YoZ(cammerVAfter);
    cammerVAfter = rotaY3DValue(cammerVAfter, sinYoZ, cosYoZ);
    // console.log("x:"+cammerVAfter.x + "y:" + cammerVAfter.y + "z:" + cammerVAfter.z);

    var point = new defineObj();

    var pointNew = new Array(8);
    for (i=0; i<point.length; i++) {
        var obj = rotaPoint2XoY(point[i], cammerObj, cammerV, sinXoZ, cosXoZ, sinYoZ, cosYoZ);
        var x = (obj.x + 5) * 100;
        var y = (obj.y + 5) * 100;
        // console.log("x:" + x +",y:"+y)
        // ctx.fillRect(x, y, 1, 1);
        pointNew[i] = new vector2(x, y);
    }
    //method 1
    //ctx.beginpath();
    // ctx.moveTo(pointNew[0].x, pointNew[0].y);
    // ctx.lineTo(pointNew[1].x, pointNew[1].y);
    // ctx.lineTo(pointNew[3].x, pointNew[3].y);
    // ctx.lineTo(pointNew[2].x, pointNew[2].y);
    // ctx.lineTo(pointNew[0].x, pointNew[0].y);
    // ctx.fillStyle = "blue";
    // ctx.moveTo(pointNew[1].x, pointNew[1].y);
    // ctx.lineTo(pointNew[5].x, pointNew[5].y);
    // ctx.lineTo(pointNew[7].x, pointNew[7].y);
    // ctx.lineTo(pointNew[3].x, pointNew[3].y);
    // ctx.moveTo(pointNew[2].x, pointNew[2].y);
    // ctx.lineTo(pointNew[6].x, pointNew[6].y);
    // ctx.lineTo(pointNew[7].x, pointNew[7].y);
    // ctx.moveTo(pointNew[0].x, pointNew[0].y);
    // ctx.lineTo(pointNew[4].x, pointNew[4].y);
    // ctx.lineTo(pointNew[5].x, pointNew[5].y);
    // ctx.moveTo(pointNew[6].x, pointNew[6].y);
    // ctx.lineTo(pointNew[4].x, pointNew[4].y);

    //method2
    //面1
    ctx.beginPath();

    ctx.moveTo(pointNew[0].x, pointNew[0].y);
    ctx.lineTo(pointNew[1].x, pointNew[1].y);
    ctx.lineTo(pointNew[3].x, pointNew[3].y);
    ctx.lineTo(pointNew[2].x, pointNew[2].y);
    ctx.fillStyle = "red";
    ctx.closePath();
    ctx.fill();
    ctx.stroke();


    //面2
    ctx.beginPath();
    ctx.moveTo(pointNew[0].x, pointNew[0].y);
    ctx.lineTo(pointNew[4].x, pointNew[4].y);
    ctx.lineTo(pointNew[5].x, pointNew[5].y);
    ctx.lineTo(pointNew[1].x, pointNew[1].y);
    ctx.fillStyle = "blue";
    ctx.closePath();
    ctx.fill();
    ctx.stroke();


    
//面3
ctx.beginPath();
ctx.moveTo(pointNew[0].x, pointNew[0].y);
ctx.lineTo(pointNew[2].x, pointNew[2].y);
ctx.lineTo(pointNew[6].x, pointNew[6].y);
ctx.lineTo(pointNew[4].x, pointNew[4].y);
ctx.fillStyle = "yellow";
ctx.closePath();
ctx.fill();
ctx.stroke();



//面4
ctx.beginPath();
ctx.moveTo(pointNew[2].x, pointNew[2].y);
ctx.lineTo(pointNew[3].x, pointNew[3].y);
ctx.lineTo(pointNew[7].x, pointNew[7].y);
ctx.lineTo(pointNew[6].x, pointNew[6].y);
ctx.fillStyle = "orange";
ctx.closePath();
ctx.fill();
ctx.stroke();



//面5
ctx.beginPath();
ctx.moveTo(pointNew[1].x, pointNew[1].y);
ctx.lineTo(pointNew[3].x, pointNew[3].y);
ctx.lineTo(pointNew[7].x, pointNew[7].y);
ctx.lineTo(pointNew[5].x, pointNew[5].y);
ctx.fillStyle = "black";
ctx.closePath();
ctx.fill();
ctx.stroke();



//面6
ctx.beginPath();
ctx.moveTo(pointNew[4].x, pointNew[4].y);
ctx.lineTo(pointNew[6].x, pointNew[6].y);
ctx.lineTo(pointNew[7].x, pointNew[7].y);
ctx.lineTo(pointNew[5].x, pointNew[5].y);
ctx.fillStyle = "green";
ctx.closePath();
ctx.fill();
ctx.stroke();
}



function drawPlate(ctx, point1, point2, point3, point4) {
    ctx.beginPath();
    ctx.moveTo(point1.x, point1.y);
    ctx.lineTo(point2.x, point2.y);
    ctx.lineTo(point3.x, point3.y);
    ctx.lineTo(point4.x, point4.y);
    ctx.closePath();
    ctx.stroke();
}